<template>
  <div id="mask" :class="{show: isMenuVisible}">
    <div class="background"></div>
  </div>
  <div id="top">
    <div class="w640">
      <div class="title">
        <h3>购物清单</h3>
      </div>
      <div class="icon_link left">
        <a  href="javascript:window.history.back()">
          <i class="iconfont icon-arrows_left"></i>
        </a>
      </div>
      <div class="icon_link right">
        <a href="javascript:void()" @click="showMenu">
          <i class="iconfont icon-menu_learn"></i>
        </a>
      </div>
      <div id="menu" ref="menu">
        <menuIndex></menuIndex>
      </div>
    </div>
  </div>
  <div class="cart_list" style="margin-top: 20px;">
    <dl v-for="item in cartList" :key="item.id">
        <dt style="margin-left: 5px;">
            <el-checkbox  :model-value="item.selected" @change="(selected)=>singleCheck(item,selected)"/>
        </dt>
      <dd class="img"><img :src="item.picture" alt=""></dd>
      <dd class="info">
        <h3>
					<span><a href="./product.htm?id=cart.goodslist[i].goodsid">{{item.name }}</a></span> 
					<span><i class="iconfont icon-shanchu2"></i></span>
          <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm=" CartStore.delCart(item)">
                    <template #reference>
                      <a href="javascript:;" style="font-size: 16px; margin-top: 20px;">删除</a>
                    </template>
          </el-popconfirm>
        </h3>
        <p class="price">
					<span>￥{{ item.price }}</span><small>原价：<del>￥{{ item.oldPrice }}</del></small>
				</p>
          <div class="amount">
            <span>x{{ item.count }}</span>
          <dl>
            <dd style="cursor:pointer" @click="decreaseCount(item)">-</dd>
					  <dt>{{ item.count }}</dt>
					  <dd style="cursor:pointer" @click="increaseCount(item)">+</dd></dl>
        </div>
        </dd>
    </dl>
  </div>
  <div id="nav">
    <div class="w640 cart">
      <dl>
        <dt><label>
            <el-checkbox  :model-value="CartStore.isAll" @change="(selected)=>AllCheck(selected)"/> 全选
             </label>
          </dt>
        <dd>
          <p>
            <span class="total">
              已选择：<small>{{CartStore.selectedCount}}件</small>
              合计：<b>￥{{ CartStore.selectedPrice }}</b><small>元</small>
            </span>
            <a href="javascript:submitOrder()">
              <button class="green" @click="submitOrder">
                提交订单
              </button>
            </a>
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script lang="ts" setup name="Cart">
import {ref, toRefs} from "vue"
import {useCartStore} from "@/store/modules/cart"
import { useRouter } from "vue-router";
const $router=useRouter()
const CartStore=useCartStore()
const {cartList} =toRefs(CartStore)

//引入菜单
import menuIndex from "@/components/menu/index.vue"
import { ElMessage } from "element-plus";
//切换遮罩层响应式数据
const menu = ref<HTMLElement | null>(null);
const  isMenuVisible =ref<boolean>(false);
//点击按钮遮罩层切换
const showMenu = () => {
  if (menu.value) {
    menu.value.classList.toggle('show');
    isMenuVisible.value = !isMenuVisible.value;
  }
};
const decreaseCount=(item:any)=> {
    if (item.count > 1) {
      item.count--;
    }
  };
const increaseCount=(item:any)=> {
    item.count++;
  }
//单选
const singleCheck=(item:any,selected:any)=>{
  CartStore.getsingleCheck(item.skuId,selected)
}
//全选
const AllCheck=(selected:any)=>{
  CartStore.allCheck(selected)
}
//提交订单

const submitOrder=()=>{
  if(CartStore.selectedCount>=1){
    $router.push('/order')
  }else{
    ElMessage.warning('请选择你要购买的商品')
  }
}
</script>

<style scoped>
 #mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>